<template>
	<view class="">
		<view class="item-catyes">
			<van-icon name="shop-o" />&nbsp;
			<text class="time">{{calerlist.subOrderInfos[0].commodityHoldUserName}}</text>
			<text class="caty-tistus" v-if="calerlist.status == 'Cancel'">{{formatEmployment(calerlist.status)}}</text>
			<text class="caty-tistus" v-else>{{formatEmployment(calerlist.subOrderInfos[0].status)}}</text>
		</view>  
		<view class="order-item" v-for="(item,index) in calerlist.subOrderInfos" :key="index">
			<view
				class="goods-box-single" 
			>
				<image class="goods-img" :src="item.commodityImages[0]" mode=""></image>
				<view class="right">     
					<text class="title clamp">{{item.commodityTitle}}</text>
					<text class="attr-box">规格：{{item.specName}}</text>
					<text class="price">{{item.price}}</text> 
					<text class="num">x{{item.number}}</text>
				</view>
			</view>
		</view>
		<view class="action-box b-t" v-if="calerlist.subOrderInfos[0].status == 'Receipt'">
			<button class="action-btn" @click="cancelOrder(item)">退款</button>
		</view>
		<view class="caty-order">
			<text>商品总价</text>
			<text class="caty-test" style="color: black; font-weight: bold; font-size: 35rpx;">￥{{calerlist.totalPrice}}</text>
		</view>
		<view class="caty-order"> 
			<text>付款</text>
			<text class="caty-test" style="color: #ff7144; font-weight: 500; font-size: 35rpx;">￥{{calerlist.totalPrice}}</text>
		</view>
		<view class="caty-order">
			<text>付款方式</text>
			<text class="caty-test" style="color: #818080; font-weight: 500; font-size: 28rpx;">{{funterser(calerlist.payInfos[0].payChannel)}}</text>
		</view> 
		<view class="caty-order"> 
			<text>收货信息</text>
			<text class="caty-test" style="color: #818080; font-weight: 500; font-size: 28rpx;">
			{{info.OrderAddress.province}}&nbsp;{{info.OrderAddress.city}}&nbsp;{{info.OrderAddress.county}}&nbsp;{{info.OrderAddress.detail}}</text>
		</view>
		<view class="caty-order">
			<text>订单编号</text>
			<text class="caty-test" style="color: #818080; font-weight: 500; font-size: 28rpx;">{{calerlist.subOrderInfos[0].mainOrderId}}</text>
		</view>
		<view class="caty-order">
			<text>创建时间</text>
			<text class="caty-test" style="color: #818080; font-weight: 500; font-size: 28rpx;">{{calerlist.placeOrderTime}}</text>
		</view>
		<view class="caty-order">
			<text>付款时间</text>
			<text class="caty-test" style="color: #818080; font-weight: 500; font-size: 28rpx;">{{calerlist.tradeSuccessTime}}</text>
		</view>
		<view class="caty-order">
			<text>成交时间</text>
			<text class="caty-test" style="color: #818080; font-weight: 500; font-size: 28rpx;">{{calerlist.tradeSuccessTime}}</text>
		</view>
	</view> 
</template>
 
<script>
	import roles from '@/http/roles.js'
	
	import employeesConst from "@/employees/employees.js";
	const hireTypet = {};
	employeesConst.hireTypegser.forEach((item) => {
	  hireTypet[item.orderStatus] = item.value;
	});
	const hireser = {};
	employeesConst.hisertype.forEach((item) => {
	  hireser[item.payChannels] = item.value;
	});
	export default{
		data(){
			return{
				orderid:'',
				calerlist:{},
				info:{}
			}
		},
		onLoad(option) {
			this.orderid = option.orderid
			this.loachehd()
		},
		methods:{
			async loachehd(){
				const res = await roles.particulars({"mainOrderId":this.orderid})
				this.calerlist = res.data 
				this.info = JSON.parse(this.calerlist.extendData)
				console.log(this.info)
				
			},
			// 状态转换
			formatEmployment(code){
				return hireTypet[code];
			},
			funterser(code){  
				return hireser[code]
			}
		}
	}
</script>

<style lang="scss">
	.order-item{
		display: flex;
		flex-direction: column;
		padding-left: 30upx;
		background: #fff;
		margin-top: 16upx;
	}
	.item-catyes{
		display: flex;
		 margin-top: 30rpx;
		 margin-left: 20rpx;
	}
	.time{ 
		display: inline-block;
		font-size: 30rpx;
		margin-left: 10rpx;
	}
	.caty-tistus{
		display: inline-block;
		position: absolute;
		right: 20rpx;
		margin-right: 30rpx;
		font-size: 28rpx;
	}
	// 单条商品
	.goods-box-single{
		display: flex;
		padding: 20upx 0;
		.goods-img{
			display: block;
			width: 120upx;  
			height: 120upx;
			border-radius: 10px;
		}
		.right{
			flex: 1;
	
			flex-direction: column;
			padding: 0 30upx 0 24upx;
			overflow: hidden;
			.title{
				font-size: $font-base + 2upx;
				color: $font-color-dark;
				line-height: 1;
				margin-bottom: 20rpx;
			}
			.attr-box{
				font-size: $font-sm + 2upx;
				color: $font-color-light;
		
			}
			.price{
				transform: translateY(-120%);
				float: right;
				font-size: $font-base + 2upx;
				color: $font-color-dark;
				&:before{
					content: '￥'; 
					font-size: $font-sm;   
					margin: 0 2upx 0 8upx;
				}
			}
			.num{
				position: absolute;
				right: 35rpx;
				font-size:24rpx !important;
				margin: 0 8upx !important;
				color:#A4A4A4 !important;
			}
		}
	}
	.action-box{ 
		display: flex;
		justify-content: flex-end;
		align-items: center;
		height: 100upx;
		position: relative;
		padding-right: 30upx;
	}
	.action-btn{
		width: 160upx;
		height: 60upx;
		float: right; 
		margin-right: 24rpx; 
		display: block;
		padding: 0;
		text-align: center;
		line-height: 60upx;
		font-size: $font-sm + 2upx;
		color: #ff7144;
		border: 1px solid #ff7144;
		background: #fff;
		border-radius: 100px;
		&:after{
			border-radius: 100px;
		}  
	} 
	.caty-order{
		margin-top: 30rpx;
		margin-left: 20rpx;
		font-size: 28rpx;
		color: #1d1d1d;
		.caty-test{
			float: right;
			margin-right: 20rpx;
		}
	}
</style>